<template name="Roster">
  {{#contentFor "menu"}}
    {{> RosterMenu}}
  {{/contentFor}}

  {{#Layout template="InboxLayout" hasRight=hasRight hasSidebar=hasSidebar}}
    {{> RosterList}}

    {{> contentFor region="header" template="RosterHeader" data=user}}
    {{> contentFor region="right" template=cardTemplate data=user}}
  {{/Layout}}
</template>

<template name="RosterMenuItem">
  <li class="{{#if inRouter 'roster'}}active{{/if}}">
    <a href="/roster/users"><i class="fa fa-address-book"></i> <span>{{_ 'app_contacts'}}</span></a>
  </li>
</template>

<template name="RosterMenu">
  <p class="navbar-text pull-left menu-title">
    {{#if compare type '===' 'Contacts'}}
      {{_ "users_external"}}
    {{else}}
      {{_ "app_users"}}
    {{/if}}
  </p>

  <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
      <li><a href="#" id="btn-search"><i class="fa fa-search"></i></a></li>
      <li>
        {{#if compare type '===' 'Contacts'}}
          <a href="/roster/users" id="btn-toggle-contacts">{{_ "app_users"}} <i class="fa fa-chevron-right"></i></a>
        {{else}}
          <a href="/roster/external" id="btn-toggle-contacts">{{_ "users_external"}} <i class="fa fa-chevron-right"></i></a>
        {{/if}}
      </li>
    </ul>
  </div>
</template>

<template name="RosterList">
  <ul class="list-group threads">
    <li class="list-group-item thread search hide">
      <input type="text" class="form-control" placeholder="{{_ 'search_action'}}">
    </li>
    {{#each users}}
      <a href="{{rosterPath}}" class="list-group-item clearfix thread" id="{{_id}}">
        <div class="thread-icon">
          {{> avatar user=this shape="circle" class="" size="small"}}
        </div>
        <div class="thread-title">
          <small class="pull-right text-muted">&nbsp;{{title}}</small>
          <div class="thread-subject text-ellipsis">{{name}}</div>
          <div class="message-summary text-ellipsis text-muted">{{email}}</div>
        </div>
      </a>
    {{/each}}
    {{#if nextPath}}
      <a href="{{nextPath}}" class="list-group-item text-center text-muted thread small">
        {{_ "paginate_load_more"}}
      </a>
    {{/if}}
  </ul>
</template>

<template name="RosterHeader">
  {{> InboxBackButton}}
  {{#LinkToEditContact contact=this class="pull-right"}}
    <i class="fa fa-edit"></i>
  {{/LinkToEditContact}}
  <div class="thread-subject">{{name}}</div>
</template>

<template name="RosterCard">
  <div class="roster-card">
    <div class="box box-widget widget-user-2">
      <!-- Add the bg color to the header using any of the bg-* classes -->
      <div class="widget-user-header bg-yellow clearfix">
        {{> avatar user=this shape="circle" class="img-circle pull-left" size="large"}}
          <!-- /.widget-user-image -->
        <h3 class="widget-user-username">{{name}}</h3>
        <h5 class="widget-user-desc">{{profile.message}}</h5>
      </div>
      <div class="box-footer no-padding">
        <ul class="nav nav-stacked">
          {{#with title}}<li><a class="text-muted text-ellipsis">{{_ 'profile_title'}} <span class="pull-right">{{this}}</span></a></li>{{/with}}
          <li><a class="text-muted text-ellipsis">{{_ 'Email'}} <span class="pull-right">{{email}}</span></a></li>
          <li>
            {{#LinkToUserShared user=this class="text-muted text-ellipsis"}}
              {{_ 'share_title'}}
              <span class="pull-right text-muted"><i class="fa fa-chevron-right"></i></span>
            {{/LinkToUserShared}}
          </li>
        </ul>
      </div>
    </div>

    {{> LinkToChat roster=this class="btn-block"}}
  </div>
</template>

<template name="ContactCard">
  <div class="roster-card">
    <div class="box box-widget widget-user-2">
      <!-- Add the bg color to the header using any of the bg-* classes -->
      <div class="widget-user-header bg-green clearfix">
        {{> avatar user=this shape="circle" class="img-circle pull-left" size="large"}}
          <!-- /.widget-user-image -->
        <h3 class="widget-user-username">{{name}}</h3>
        <h5 class="widget-user-desc">{{profile.company}}</h5>
      </div>
      <div class="box-footer no-padding">
        <ul class="nav nav-stacked">
          {{#with title}}<li><a class="text-muted text-ellipsis">{{_ 'profile_title'}} <span class="pull-right">{{this}}</span></a></li>{{/with}}
          <li><a class="text-muted text-ellipsis">{{_ 'Email'}} <span class="pull-right">{{email}}</span></a></li>
        </ul>
      </div>
    </div>

    {{> LinkToChat roster=this class="btn-block"}}
  </div>
</template>

<template name="LinkToEditContact">
  {{#if currentUser.isAdmin}}
    {{#unless contact.internal}}
      <a href="#" class="btn-edit-contact inbox-header-icon text-muted {{class}}">{{> UI.contentBlock}}</a>
    {{/unless}}
  {{/if}}
</template>

<template name="LinkToChat">
  <a href="#" class="btn btn-primary {{class}}" id="btn-chat">{{_ "users_start_chat"}}</a>
</template>

<template name="LinkToCardModal">
  <a href="#" class="btn-show-card {{class}}">{{> UI.contentBlock}}</a>
</template>
